<style lang="less" scoped>
@import "../assets/css/config.less";
#addProjectStep {
  height: 100vh;
  padding-top: 58px;
  min-width: 1210px;
  .header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .body {
    padding: .625rem 1.875rem;
    font-size: 0.9rem;
  }
  h4 {
    padding: .6rem;
  }
}
</style>

<template>
  <div id="addProjectStep">
    <div class="header">
      <myheader></myheader>
    </div>
    <div class="body">
      <h4>步骤标题</h4>
      <Input v-model="stepTitle" placeholder="请输入知识点标题" style="width:300px"></Input>
    
      <h4>知识点内容</h4>
      <div ref="editor" style="text-align:left;font-size:14px"></div>
      <button class="confirm" style="margin-top: 20px" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
// import "../assets/css/config.less";
import myheader from '../components/header.vue'
import E from "wangeditor";
import {add_process} from '../api/api'

export default {
  name: 'addProjectStep',
  data() {
    return {
      stepTitle: '',
      editorContent: ''
    }
  },
  mounted() {
    const that = this;
    this.$nextTick(() => {
      var editor = new E(this.$refs.editor);

      editor.customConfig.onchange = html => {
        that.editorContent = html;
      };

      var url = "";
      if (process.env.NODE_ENV === "development") {
        url = "http://localhost:8080/api/uploadImg";
      } else if (process.env.NODE_ENV === "production") {
        url = "https://www.ourspark.org/api/uploadImg";
      }
      editor.customConfig.uploadImgServer = url; // 上传图片到服务器

      
      editor.customConfig.zIndex = 0;
      editor.create();
      editor.txt.html("<p>请在此输入步骤内容</p>");
    })

  },
  components: {
    myheader
  },
  methods: {
    submit() {
      if(!this.stepTitle.trim()) {
        this.$message.error('步骤标题不能为空');
        return;
      }
      if(!this.editorContent.trim() || this.editorContent.trim() === "<p>请在此输入步骤内容</p>") {
        this.$message.error('请输入步骤内容');
        return;
      }
      const menu = this.$route.params.menu.split(',')
      var json = {
        "project_id": menu[0],
        "process": menu[2],
        "title": this.stepTitle,
        "content": this.editorContent,
        "point_ids": [],
        "sequence": menu[3]
      }
      add_process(json).then(res => {
        if(res.state) {
          this.$message.success('添加步骤内容成功');
          this.$router.go(-1);
        } else {
          this.$message.error('添加步骤内容失败');
        }
      }).catch(err => {
        this.$message.error('添加步骤内容出错');
        console.log('添加步骤内容出错' + err);
      })
    }
  }
}
</script>